<template>
  <div class="user-center">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <van-image
        round
        width="80"
        height="80"
        :src="userInfo.avatar || require('@/assets/default-avatar.png')"
      />
      <div class="user-info">
        <h3>{{ userInfo.username }}</h3>
        <p>{{ userInfo.phone }}</p>
      </div>
    </div>

    <!-- 功能菜单 -->
    <van-cell-group class="menu-group">
      <van-cell title="我的预定" is-link to="/reservation" />
      <van-cell title="修改资料" is-link @click="showEditInfo = true" />
      <van-cell title="修改密码" is-link @click="showChangePassword = true" />
      <van-cell title="退出登录" @click="handleLogout" />
    </van-cell-group>

    <!-- 修改资料弹窗 -->
    <van-popup v-model="showEditInfo" position="bottom" round>
      <div class="popup-content">
        <h3>修改资料</h3>
        <van-form @submit="onUpdateInfo">
          <van-field
            v-model="editForm.username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="editForm.phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
            ]"
          />
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              保存
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 修改密码弹窗 -->
    <van-popup v-model="showChangePassword" position="bottom" round>
      <div class="popup-content">
        <h3>修改密码</h3>
        <van-form @submit="onChangePassword">
          <van-field
            v-model="passwordForm.oldPassword"
            type="password"
            label="原密码"
            placeholder="请输入原密码"
            :rules="[{ required: true, message: '请填写原密码' }]"
          />
          <van-field
            v-model="passwordForm.newPassword"
            type="password"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
          />
          <van-field
            v-model="passwordForm.confirmPassword"
            type="password"
            label="确认密码"
            placeholder="请再次输入新密码"
            :rules="[
              { required: true, message: '请确认新密码' },
              { validator: validatePass, message: '两次输入密码不一致' }
            ]"
          />
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              确认修改
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo, changePassword } from '@/api/user'

export default {
  name: 'UserCenter',
  data() {
    return {
      userInfo: {},
      showEditInfo: false,
      showChangePassword: false,
      editForm: {
        username: '',
        phone: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserInfo()
        this.userInfo = res.data
        this.editForm.username = res.data.username
        this.editForm.phone = res.data.phone
      } catch (error) {
        this.$toast.fail('获取用户信息失败')
      }
    },
    validatePass(val) {
      return val === this.passwordForm.newPassword
    },
    async onUpdateInfo() {
      try {
        await updateUserInfo(this.editForm)
        this.$toast.success('修改成功')
        this.showEditInfo = false
        this.getUserInfo()
      } catch (error) {
        this.$toast.fail('修改失败')
      }
    },
    async onChangePassword() {
      try {
        await changePassword({
          oldPassword: this.passwordForm.oldPassword,
          newPassword: this.passwordForm.newPassword
        })
        this.$toast.success('密码修改成功')
        this.showChangePassword = false
        this.passwordForm = {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        }
      } catch (error) {
        this.$toast.fail('密码修改失败')
      }
    },
    handleLogout() {
      this.$dialog.confirm({
        title: '提示',
        message: '确定要退出登录吗？'
      }).then(() => {
        localStorage.removeItem('token')
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style scoped>
.user-center {
  min-height: 100vh;
  background-color: #f7f8fa;
}
.user-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
.user-info {
  margin-left: 20px;
}
.user-info h3 {
  margin: 0;
  font-size: 18px;
}
.user-info p {
  margin: 5px 0 0;
  color: #666;
}
.menu-group {
  margin-top: 12px;
}
.popup-content {
  padding: 20px;
}
.popup-content h3 {
  margin: 0 0 20px;
  text-align: center;
}
</style> 